<template>
  <div class="cart-icon" @click="goCart">
    <span class="icon">购物车🛒</span>
    <span class="count" v-if="count > 0">{{ count }}</span>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useCartStore } from '@/store/cart'
import { useRouter } from 'vue-router'
const cartStore = useCartStore()
const count = computed(() => cartStore.count)//实时获取购物车数量
const router = useRouter()
function goCart() {
  setTimeout(() => {
    router.push('/cart')
  }, 500)

}
</script>
<style scoped>
.cart-icon { position: relative; cursor: pointer; margin-left: 24px; }
.icon { font-size: 18px; }
.count { position: absolute; top: -8px; right: -8px; background: #e4393c; color: #fff; border-radius: 50%; padding: 2px 6px; font-size: 12px; }
</style>
